<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>ARP表</title>
        <link rel="stylesheet" href="/css/my.css">
        <style>
            .td-editBtn,.td-delBtn{
                border: none;
                cursor: pointer;
                margin: 5px;
                padding: 5px 10px;
                border-radius: 5px;
            }
            .td-editBtn{
                background-color: lightblue;
            }
            .td-delBtn{
                background-color: lightcoral;
            }
            .td-editBtn:hover,.td-delBtn:hover{
                /* 透明度 */
                opacity: 0.8;
            }
            .td-editBtn:active,.td-delBtn:active{
                background-color:antiquewhite;
            }
            #form1{
                display: none;
            }
            
        </style>
        <script src="/js/my.js"></script>
    </head>
    <body>
        
        <table border="1" cellspacing="0" cellpadding="10" align="center">
            <caption> <h3>ARP表</h3> <button onclick="clearall()">清空</button></caption>
            <thead>
                <th>ID</th>
                <th>IP</th>
                <th>MAC</th>
                <th>添加时间</th>
                <th>功能列表</th>
            </thead>
            <tbody id="tbody"></tbody>
            <tfoot>
                <td colspan="5" align="center">
                    <div id="pageInfo"></div>
                </td>
            </tfoot>
        </table>
        <script>
            window.onload=function(){
                loaddata(); // 加载数据
            }
            
            // 分页
            let page=1;
            let pagesize=5;

            function loaddata(){
                fetch("/cgi-bin/arp?page="+page+"&pagesize="+pagesize).then(resp=>resp.json()).then(data=>{
                   
                    console.log(data);
                    if(data.code == 0){
                        // 展示数据
                        if(data.total == 0) return;
                        data.datas.forEach(item => {
                            let tr = document.createElement("tr");
                            let td1 = document.createElement("td");
                            let td2 = document.createElement("td");
                            let td3 = document.createElement("td");
                            let td4 = document.createElement("td");
                            let td5 = document.createElement("td");

                            td1.innerText = item.id;
                            td2.innerText = item.ip;
                            td3.innerText = item.mac;
                            td4.innerText = item.add_time;
                            
                            // 在td5中添加两个按钮（删除）
                            let delBtn = document.createElement("button");
                            delBtn.innerText = "X";
                            delBtn.className = "td-delBtn"

                            // 设置删除按钮的点击事件
                            delBtn.onclick = function(){
                                if(confirm("是否删除"+item.ip+"->"+item.mac+"?")){
                                    // [注意： boa只支持get和post请求，其它的暂不支持]
                                    fetch("/cgi-bin/delarp?id="+item.id).then(resp=>resp.json()).then(data=>{
                                        // data:  {code: 0, msg: "删除成功!"}   {code: 1, msg: "数据库连接失败!"}
                                        alert(data.msg);
                                        if(data.code == 0){
                                            tbody.innerHTML = "";
                                            loaddata(); // 刷新数据
                                        }
                                    })
                                }
                            }
                            td5.append(delBtn);
                            tr.append(td1, td2, td3, td4, td5);

                            tbody.append(tr);
                        });
                        
                        createPage(page,pagesize, pageInfo, data.total);
                       

                    }else{
                        alert(data.msg);
                    }
                })
            }
      
            function clearall(){
                if(confirm("是否清空?")){
                    // [注意： boa只支持get和post请求，其它的暂不支持]
                    fetch("/cgi-bin/delarp").then(resp=>resp.json()).then(data=>{
                        // data:  {code: 0, msg: "删除成功!"}   {code: 1, msg: "数据库连接失败!"}
                        alert(data.msg);
                        if(data.code == 0){
                            tbody.innerHTML = "";
                            pageInfo.innerHTML = "";
                            loaddata(); // 刷新数据
                        }
                    })
                }
            }
      </script>
    </body>
</html>